<!DOCTYPE html>
<html>
<head>
<title>币种列表</title>
<#include "/header.html">
</head>
<body>
<div id="rrapp" v-cloak>
	<div v-show="showList">
		<div class="grid-btn">
			<div style="overflow-x:auto">
				<table style="border-collapse:separate; border-spacing: 10px;">

					<tr>
						<td class="col-sm-3">
							<#if shiro.hasPermission("sys:slideshow:save")>
								<a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
							</#if>
								<#if shiro.hasPermission("sys:slideshow:update")>
								<a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
							</#if>
							<#if shiro.hasPermission("sys:slideshow:delete")>
								<a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
							</#if>
						</td>
					</tr>
				</table>

			</div>

		</div>
	    <table id="jqGrid"></table>
	    <div id="jqGridPager"></div>
    </div>

	<div v-show="!showList" class="panel panel-default">
		<div class="panel-heading">{{title}}</div>
		<div  class="form-horizontal">
			<div class="form-group">
				<div class="col-sm-2 control-label">币种全名</div>
				<div class="col-sm-10">
					<input type="text" class="form-control" style="cursor:pointer;" v-model="slideshow.coinName" placeholder="币种全名"/>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-2 control-label">币种中文名称</div>
				<div class="col-sm-10">
					<input type="text" class="form-control" style="cursor:pointer;" v-model="slideshow.coinCn" placeholder="币种中文名称"/>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-2 control-label">币种简称</div>
				<div class="col-sm-10">
					<input type="text" class="form-control" v-model="slideshow.symbol" placeholder="币种简称"/>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-2 control-label">slip44</div>
				<div class="col-sm-10">
					<input type="text" class="form-control" v-model="slideshow.slip44" placeholder="slip44"/>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-2 control-label">币种logo</div>
				<div class="col-sm-10">
					<input type="text" class="form-control" v-model="slideshow.logoUrl" placeholder="币种logo"/>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-2 control-label">区块链浏览器</div>
				<div class="col-sm-10">
					<input type="text" class="form-control" v-model="slideshow.browerUrl" placeholder="区块链浏览器"/>
				</div>
			</div>

			<div class="form-group">
				<div class="col-sm-2 control-label"></div>
				<input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
				&nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
			</div>

		</form>
	</div>
</div>
<div id="Img" style="display: none;padding-left: 10px;padding-top: 10px;">
	<img id="showImg" alt="" src="" style="width: 620px;height: 390px;text-align:center; ">
</div>
<script>
	$(function () {
		$("#jqGrid").jqGrid({
			url: baseURL + 'sys/coins/list',
			datatype: "json",
			colModel: [
				{ label: 'id', name: 'id', index: "id", width: 45, key: true ,hidden:true, key: true  },
				{ label: '币种全名', name: 'coinName', index: "coin_name", width: 45},
				{ label: '币种中文名称', name: 'coinCn', index: "coin_cn", width: 45},
				{ label: '币种简称', name: 'symbol', index: "symbol", width: 80},
				{ label: 'slip44', name: 'slip44', index: "slip44", width: 80},
				{ label: '币种logo', name: 'logoUrl', width: 60 ,formatter: function(value, options, row){
						return "<img  style='width:30px;height: 30px;cursor:pointer;'  src='"+value+"'   onclick='shouImg(\""+value+"\")'></img>";
					}},
				{ label: '区块链浏览器', name: 'browerUrl', index: "brower_url", width: 80},
				{ label: '人民币价格', name: 'rmbPrice', index: "rmb_price", width: 80},
				{ label: '美元价格', name: 'usdPrice', index: "usd_price", width: 80},
				{ label: '涨幅', name: 'rate', index: "rate", width: 80},
				{ label: '是否首页显示', name: 'saleableFlag', index: 'delete_flag', width: 50,formatter: function (value, options, row) {
					if(value==1){
						return "<span>显示</span>";
					}else{
						return "<span>不显示</span>";
					}
				}},
				{ label: '是否创建资产', name: 'propertyFlag', index: 'delete_flag', width: 50,formatter: function (value, options, row) {
					if(value==1){
						return "<span>创建</span>";
					}else{
						return "<span>不创建</span>";
					}
				}},
				{ label: '创建时间', name: 'createTime', width: 80 },
				{ label: '修改时间', name: 'updateTime', width: 80 },
			],
			viewrecords: true,
			height: 385,
			rowNum: 10,
			rowList : [10,30,50],
			rownumbers: true,
			rownumWidth: 25,
			autowidth:true,
			multiselect: true,
			pager: "#jqGridPager",
			jsonReader : {
				root: "page.list",
				page: "page.currPage",
				total: "page.totalPage",
				records: "page.totalCount"
			},
			prmNames : {
				page:"page",
				rows:"limit",
				order: "order"
			},
			gridComplete:function(){
				//隐藏grid底部滚动条
				$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
			}
		});
		// $("#type").val("");
		// $("#imageType1").val("");
		// $( "#createtime").datepicker({
		// 	showOtherMonths: true,
		// 	selectOtherMonths: true
		// });
		// $( "#endtime").datepicker({
		// 	showOtherMonths: true,
		// 	selectOtherMonths: true
		// });
		// $( "#q_endtime").datepicker({
		// 	showOtherMonths: true,
		// 	selectOtherMonths: true
		// });
		// $( "#q_endtime1").datepicker({
		// 	showOtherMonths: true,
		// 	selectOtherMonths: true
		// });
	});

	var setting = {
		data:{
			q:{
				articleTitle: null
			},
			showList: true,
			title:null,
			slideshow:{

			}
		},
	};
	var ztree;

	var vm = new Vue({
		el:'#rrapp',
		data:{
			q:{
				id: null,
				articleTitle:null
			},
			showList: true,
			title:null,
			slideshow :{

			}
		},
		methods: {
			query: function () {
				vm.reload();
			},
			add: function(){
				vm.showList = false;
				vm.title = "新增";
				vm.slideshow = {id:null,  sort:null,  imageType:1,  url:null,  createtime:null,  endtime:null,  describe:null,skipId:null,status:1};
				vm.clear1();
			},

			update: function () {
				var id = getSelectedRow();
				if(id == null){
					return ;
				}

				vm.showList = false;
				vm.title = "修改";

				vm.getinfor(id);

			},
			del: function () {
				var id = getSelectedRows();
				if(id == null){
					return ;
				}

				confirm('确定要删除选中的记录？', function(){
					$.ajax({
						type: "POST",
						url: baseURL + "sys/coins/delete",
						contentType: "application/json",
						data: JSON.stringify(id),
						success: function(r){
							if(r.code == 0){
								alert('操作成功', function(){
									vm.reload();
								});
							}else{
								alert(r.msg);
							}
						}
					});
				});
			},
			saveOrUpdate: function () {
				var url = "sys/coins/update";
				var createtime =   $("#createtime").val();
				vm.slideshow.createtime = createtime;
				$.ajax({
					type: "POST",
					url: baseURL + url,
					contentType: "application/json",
					data: JSON.stringify(vm.slideshow),
					success: function(r){
						if(r.code === 0){
							alert('操作成功', function(){
								vm.reload();
							});
						}else{
							alert(r.msg);
						}
					}
				});
			},
			getinfor: function(id){
				$.get(baseURL + "sys/coins/info/"+id, function(r){
					vm.slideshow = r.coins;
					$("#createtime").val(r.coins.createtime);
					$("#endtime").val(r.coins.endtime);
					$("#imageId").attr("src",r.coins.url);
				});
			},
			clear1: function(){
				$("#url").val("");
			}, reset:function(){
				vm.q = {status:"",createtime:null,endtime:null,imageType:""};
				$("input[name='qInput']").val('');
				vm.reload();

			},
			reload: function () {
				vm.showList = true;
				var page = $("#jqGrid").jqGrid('getGridParam','page');
				var createtime =   $("#q_endtime").val();
				var endtime = $("#q_endtime1").val();
				$("#jqGrid").jqGrid('setGridParam',{
					postData:{'status': vm.q.status,'describe': vm.q.describe,'createtime':createtime,'endtime': endtime,'imageType':vm.q.imageType},
					page:1
				}).trigger("reloadGrid");
			},
		}
	});
	function shouImg(val){
		$("#showImg").attr("src",val);
		layer.open({
			type: 1,
			skin: 'layui-layer-molv',
			title: "背景图",
			area: ['650px', '500px'],
			shade: 0,
			shadeClose: false,
			content: jQuery("#Img"),
			btn: ['确定'],
			btn1: function (index) {
				layer.close(index);
			}
		});


	}

</script>
</body>
</html>